<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- mvvvm -->
    <!-- vm:数据改变之后会通知视图更新，视图改变之后驱动数据更新  Object.defineProperty -->

    <!-- <input type="text" id="ipt"> -->
    <div id="app">
        <h6>{{username}}</h6>
        <input type="text" v-model="username">
        <div>
            城市:{{address.city}} 区：
        </div>
    </div>
    <script src="./mvvm1.js"></script>
    <script>

        let vm = new Mvvm({
            el:'#app',
            data:{
                username:'zs',
                address:{
                    city:'北京',
                    area:'海淀区'
                }
            }
        })

        // let val = 'lixd';
        // let data = {name:val};

        // // Object.defineProperty(data,'name',{
        // //     value:'zs',
        // //     writable:false,
        // //     configurable:false,
        // //     enumerable:false
        // // })

        // // for(let key in data){
        // //     console.log(key)
        // // }

        // let ipt = document.querySelector('#ipt');

        

        // //把当前的属性变成访问器属性
        // Object.defineProperty(data,'name',{
        //     set(newVal){
        //         //设置值
        //         console.log("设置值");
        //         ipt.value = newVal;
        //         val = newVal;
        //     },
        //     get(){
        //         console.log("获取值");
        //         return val;
        //     }
        // })
       
        // ipt.addEventListener('input',(e) => {
        //     val = e.target.value;
        // })

    </script>
</body>
</html>